<template>
    <div>
        <div class="container" style="padding-top:5vh;" id="components-layout-demo-basic">
            <a-row style="margin-top: 2vh;">
                <a-col :span='20' :offset="2" class='headerNav'>
                    <p class="p_sty">对以下业务申请变更，请上传《商户业务变更申请表》加盖公章的照片，我们将在1-3个工作日内完成审核，审核通过后变更生效。<a
                            href="static/授权委托书.docx" download="授权委托书.docx" target="_blank">下载模板</a></p>
                </a-col>
            </a-row>
            <div class="table_sty">
                <a-form @submit="handleSubmit" :form="form">
                    <a-table :columns="columns" :dataSource="list" :pagination="false"
                        :rowKey="record => record.feeTemplateId">
                        <!-- <p slot="expandedRowRender" slot-scope="record" style="margin: 0">{{record.description}}</p> -->
                        <span slot="name" slot-scope="text,record">
                            <span v-if='record.name'>
                                {{record.name}}
                            </span>
                            <span v-else>
                                {{record.bankName}}
                            </span>
                        </span>
                        <span slot="feeTemplate" slot-scope="text,record,index" class="feeInput">
                            <span v-if='record.feeTemplate.rate || record.feeTemplate.rate === 0'>
                                <a-input-number :value="getInputNumber(record.feeTemplate.rate)"
                                    :disabled="!record.open" :min="0" :max="10" :step="0.01" @focus='focus(index)'
                                    @change="numberChange" /><strong>%</strong>
                            </span>
                            <span v-if='record.transAmountTop' style="margin-left:20px;">
                                <a-input-number :value="getInputNumber(record.transAmountTop)"
                                    :disabled="!record.open" :min="0" :max="10" :step="1" @focus='focus(index)'
                                    @change="numberChange" /><strong>封顶</strong>
                            </span>
                            <span v-if='record.extendType == "bank"'>
                                按类分布
                            </span>
                        </span>
                        <span slot="action" slot-scope="text,record,index">
                            <div v-if='record.extendType'>
                                <a-radio-group @change="onChange" :name="index + ''" :value='record.open'>
                                    <a-radio :value="true">正常</a-radio>
                                    <a-radio :value="false">关闭</a-radio>
                                </a-radio-group>
                            </div>
                        </span>
                        <!-- <span slot="action" slot-scope="record">
                      <router-link :to="{path:'/modify_manager/customer/org/list/detail/' + record.memberNo}">详细</router-link>
                      </span> -->
                        <!-- <span slot="action1" slot-scope="record">
                            <span v-if="record.feeTemplate.type=='rate'">
                                <a href="javascript:;void(0)" @click="showModal1(record)">修改</a>
                            </span>
                            <span v-if="record.feeTemplate.type=='rate_cd'">
                                <a href="javascript:;void(0)" @click="showModal2(record)">修改</a>
                            </span>
                            <span v-if="record.feeTemplate.type=='d0'">
                                <a href="javascript:;void(0)" @click="showModal3(record)">修改</a>
                            </span>
                        </span> -->
                        <a-divider type="vertical" />
                    </a-table>
                    <!-- </a-form> -->


                    <!-- <a-form class="form-sty" :form="form" @submit="handleSubmit"> -->
                    <a-form-item v-bind="formItemLayout" label="上传申请表" :help="`支持图片格式JPG、PNG，且每个文件大小不超过1M`">
                        <div style="display:inline-block;">
                            <a-upload v-decorator="['upload',{rules: [{ required: true, message: '请上传营业执照!' }]}]"
                                name="upfile" :headers="henderstoken" action="/file/file/upload" listType="picture-card" :fileList="fileList"
                                :data="{to}" @preview="handlePreview" @change="handleChange">
                                <div v-if="fileList.length < 1">
                                    <a-icon type="plus" />
                                    <div class="ant-upload-text">变更申请表</div>
                                </div>
                            </a-upload>
                            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                                <img alt="example" style="width: 100%" :src="previewImage">
                            </a-modal>
                        </div>
                    </a-form-item>
                    <a-form-item v-bind="formItemLayoutWithOutLabel">
                        <a-button style="width:90px;margin-top:1vh;" html-type="submit" type="primary"
                            :loading="loading">
                            提交
                        </a-button>
                        <a-button style="width:90px;margin-top:1vh;margin-left:20px;" @click='cancelUpload'
                            type="primary">
                            取消
                        </a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>

    </div>
</template>

<script>
    import AForm from "ant-design-vue/es/form/Form";
    import ATabs from "ant-design-vue/es/tabs";
    import GlobalFooter from "../../layouts/GlobalFooter";
    import AFormItem from "ant-design-vue/es/form/FormItem";
    import AInput from "ant-design-vue/es/input/Input";
    import AIcon from "ant-design-vue/es/icon";
    import AInputGroup from "ant-design-vue/es/input/Group";
    import AButton from "ant-design-vue/es/button/button";
    import ACol from "ant-design-vue/es/grid/Col";
    import ARow from "ant-design-vue/es/grid/Row";
    import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
    import AAlert from "ant-design-vue/es/alert/index";
    import pick from "lodash.pick";
    import api from "@/common/api";
    import { get, post } from "@/common/api";
    import { mapState, mapMutations, mapAction } from 'vuex'
    import moment from "moment";
    const ATabPane = ATabs.TabPane;
    let id = 0;
    const columns = [
        {
            title: "功能名称",
            scopedSlots: { customRender: "name" },
            width: '20%'
        },
        {
            title: "费率",
            key: "feeTemplate",
            scopedSlots: { customRender: "feeTemplate" },
            width: '60%'
        },
        {
            title: "当前状态",
            scopedSlots: { customRender: "action" },
            width: '20%',
        },
    ];
    export default {
        name: "Login",
        components: {
            AAlert,
            ACheckbox,
            ACol,
            ARow,
            AButton,
            AInputGroup,
            AIcon,
            AInput,
            AFormItem,
            GlobalFooter,
            ATabPane,
            ATabs,
            AForm
        },
        data() {
            return {
                form: this.$form.createForm(this),
                columns: columns,
                loading: false,
                // form: this.$form.createForm(this),
                henderstoken: {
        Authorization: localStorage.getItem("token"),
      },
      to:sessionStorage.getItem("memberNo") + "_" + sessionStorage.getItem("username"),
                previewVisible: false,
                previewImage: '',
                inputValue: '',
                fileList: [],
                value: 1,
                list: [{
                    "id": 1565772875689056,
                    "name": "网关支付B2C",
                    "feeTemplate": { "rate": 0.003 },
                    "extendType": "0",
                    "configType": "trans",
                    "open": true,
                    "feeTemplateId": 1
                }, {
                    "id": 1565772816397053,
                    "name": "网关支付B2B",
                    "feeTemplate": { "rate": 0.004 },
                    "extendType": "0",
                    "configType": "trans",
                    "open": true,
                    "feeTemplateId": 2
                },
                {
                    configType: "trans",
                    extendType: "bank",
                    feeTemplate: { amount: 500 },
                    feeTemplateId: 19,
                    id: 1565925887374059,
                    name: "代付",
                    open: true,
                    children: [
                        {
                            "id": 3,
                            "feeTemplate": { "rate": 0.005 },
                            "protocolId": 2565926001063061,
                            "bankName": "工商银行",
                            "bankCode": "B0001",
                            "transAmountTop": 1600,
                            "cardType": "C",
                            "feeTemplateBankId": null
                        },
                    ]
                },
                {
                    "id": 1565772816397053,
                    "name": "网关支付B2B",
                    "feeTemplate": { "rate": 0.004 },
                    "extendType": "0",
                    "configType": "trans",
                    "open": true,
                    "feeTemplateId": 44
                },
                ],
                formItemLayout: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 4 },
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 18, offset: 1 },
                    }
                },
                formItemLayoutWithOutLabel: {
                    wrapperCol: {
                        xs: { span: 24, offset: 0 },
                        sm: { span: 18, offset: 5 },
                    },
                }
            };
        },
        computed: {
            ...mapState({
                imageSize: state => state.imageSize
            })
        },
        beforeCreate() {
            this.form = this.$form.createForm(this);
        },
        created() {
        },
        mounted() {
            let self = this;
        },
        methods: {
            handleChange({ file, fileList }) {
                let pos = file.name.lastIndexOf(".");
                let lastName = file.name.substring(pos, file.name.length);
                let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
                if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
                    this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
                    return;
                }
                if (file.size / (1024 * 1024) > this.imageSize) {
                    this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
                    return;
                }
                this.fileList = fileList;
                let obj = fileList.length > 0 ? fileList[0] : { response: { data: null, code: null } };
                if (obj) {
                    if (obj.response) {
                        if (obj.response.code == 'OK') {
                            console.log(obj.response.data);
                        }
                    }
                }
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.loading = true;
                        let data = {

                        };
                        api.proRequest(
                            data,
                            res => {
                                console.log("res", res);
                                if (res.code == "OK") {
                                    // this.email();
                                    this.$router.push('/org/Production/succ');
                                } else {
                                    this.loading = false;
                                    console.log(res.message);
                                }
                            },
                            err => {
                                console.log("err", err);
                            }
                        )
                    }
                });
            },
            handlePreview(file) {
                this.previewImage = file.url || file.thumbUrl;
                this.previewVisible = true;
            },
            handleCancel() {
                this.previewVisible = false;
            },
            cancelUpload() {
                this.fileList = [];
                this.form.setFieldsValue({
                    upload: '',
                });
            },
            getInputNumber(value) {
                // console.log('value',value)
                if (value) {
                    if (value != 0) {
                        return (value * 10000 / 100).toFixed(2);
                    } else {
                        return 0.00
                    }
                }
                return 0.00
            },
            onChange(e) {
                // console.log('radio checked', e.target.value);
                // console.log('radio checked', e.target.name);
                let index = Number(e.target.name)
                this.list[index].open = e.target.value;
                // console.log('index', index);
            },
            numberChange(value) {
                // console.log('changed', value);
                if (value) {
                    // console.log(value * 100 / 10000)
                    this.list[this.numberIndex].feeTemplate.rate = value * 100 / 10000;
                } else {
                    this.list[this.numberIndex].feeTemplate.rate = 0;
                }
            },
            focus(index) {
                this.numberIndex = index;
            }
        }

    };
</script>

<style lang="less" scoped>
    #components-layout-demo-basic .ant-layout-content {
        height: 90vh;
    }

    #components-layout-demo-basic .ant-layout-footer {
        line-height: 1.5;
    }

    #components-layout-demo-basic .ant-layout-content {
        background: transparent;

        color: #fff;
        min-height: 120px;
        line-height: 120px;
    }

    #components-layout-demo-basic>.ant-layout {
        margin-bottom: 48px;
    }

    #components-layout-demo-basic>.ant-layout:last-child {
        margin: 0;
    }

    .form-sty {
        padding: 30px 20px;
        width: 60%;
        margin: 0 auto;
    }

    span {
        cursor: pointer;
    }

    .type {
        padding: 10px;
        background: #eee;
        margin: 10px auto;
    }

    .span-wid {
        width: 300px;
        display: inline-block;
    }

    .a-sty {
        position: absolute;
        right: 18vw;
        top: 0px;
    }

    .ant-form-explain {
        margin-top: 15px !important;
    }

    .avatar-uploader>.ant-upload {
        width: 128px;
        height: 128px;
    }

    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }

    .headerNav {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .p_sty {
        font-size: 13px;
    }

    .table_sty {
        width: 90%;
        margin: 0 auto;
    }

    .feeInput strong {
        margin-left: 5px;
    }
</style>